@import './nib-reset';
@include global-reset();

@import './variables';
@import './mixins';
@import './fonts';
@import './reset';

html {
	height: 100%;
	box-sizing: border-box;

	@include desktop() {
		font-size: 16px;
	}

	@include mobile() {
		font-size: 12px;
	}
}

body {
	height: 100%;
}

#mediasoup-demo-app-container {
	height: 100%;
	width: 100%;

	// Components
	@import './components/Room';
	@import './components/Me';
	@import './components/ChatInput';
	@import './components/Peers';
	@import './components/Peer';
	@import './components/PeerView';
	@import './components/Stats';
	@import './components/Notifications';
	@import './components/NetworkThrottle';

	.countdown {
		position: fixed;
		top: 0px;
		left: 50%;
		transform: translateX(-50%);
		color: white;
		padding: 10px 20px;
		border-radius: 4px;
		z-index: 1000;
	
		.countdown-timer {
			font-size: 18px;
			font-weight: bold;
		}
	} 

	.me-container {
		width: 100% !important;
		height: 100% !important;
		bottom: 0 !important;
		left: 0 !important;
		border: 0;
	}

	.countdown {
		width: 100%;
		font-size: 24px;
		font-weight: bold;
		color: #333;
		text-align: center;
	}

	.room-main {
		width: 100%;
	}

	.room-container {
		width: 100%;
	}

	.video-placeholder {
		width: 100%;
		height: 375px;
		display: flex;
		align-items: center;
		justify-content: center;
		img {
			width: 100%;
		}
	}

	.consultant-status-list {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10px;
		img {
			width: 70px;
		}
	}

	.status-text {
		font-size: 18px;
		font-weight: bold;
		color: #fff;
		text-align: center;
		background-color: #000;
		padding: 10px;
		border-radius: 10px;
		&.online {
			background-color: rgb(0, 224, 41);
		}
		&.offline {
			background-color: rgb(255, 187, 0);
		}
	}

	.risk-tip {
		margin: 20px auto;
		width: calc(100% - 40px);
		line-height: 1.5;
		font-size: 16px;
		font-weight: bold;
		color: red;
		text-align: center;
	}

	.controls-bar {
		position: fixed;
		bottom: 40px;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 50px;
		z-index: 1000;
	}

	.control-button {
		width: 70px;
		height: 70px;
		img {
			width: 100%;
		}
		p {
			font-size: 12px;
			color: #000;
			text-align: center;
			margin-top: 4px;
		}
	}
}

// Hack to detect in JS the current media query
#mediasoup-demo-app-media-query-detector {
	position: relative;
	z-index: -1000;
	bottom: 0;
	left: 0;
	height: 1px;
	width: 1px;

	// In desktop let it "visible" so elem.offsetParent returns the parent element
	@include desktop() {
	}

	// In mobile ensure it's not displayed so elem.offsetParent returns null
	@include mobile() {
		display: none;
		position: fixed; // Required for old IE
	}
}
